<!-- banner配置详情 -->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="'福分规则详情'"
    :body-style="{ paddingBottom: '80px' }"
    :maskClosable="false"
    width="40%" 
    :close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="规则名称">
            {{ vdata.detailData.scoreRuleName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="过期规则">
            <template v-if="vdata.detailData.overType == 0">领取后{{ vdata.detailData.overDays }}天过期</template>
            <template v-else-if="vdata.detailData.overType == 1">{{ dayjs(vdata.detailData.overTime).format('YYYY[年]M[月]D[日]') }}过期</template>
            <template v-else>领取后次季度首月月底过期</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="key">
            {{ vdata.detailData.ruleKey }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="value">
            {{ vdata.detailData.ruleJson }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <span v-if="vdata.detailData.state == 0">不启用</span>
            <span v-if="vdata.detailData.state == 1">启用</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="机构号">
            {{ vdata.detailData.agentNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="备注">
            <a-textarea :value="vdata.detailData.remark" disabled :rows="3" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { $getScoreRuleInfo} from '@/api/score/scoreRule/index'
import { reactive } from 'vue'

const vdata: any = reactive({
  btnLoading: false,
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

function show(scoreRuleId) { // 弹层打开事件
 $getScoreRuleInfo({ scoreRuleId }).then(res => {
    vdata.detailData = res
    vdata.visible = true
  })
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
